<script>
export default {
  name: "Front",
  data(){
    return{
      user:localStorage.getItem("user")? JSON.parse(localStorage.getItem("user")):{}
    }
  },
  methods:{
    logout(){
      this.$store.commit("logout");
      this.$message.success("退出成功")
    },
    getUser() {
      let userName = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userName : "";
      if (userName) {
        this.request.get("/user/userName/" + userName).then(res => {
          this.user = res.data;
        })
      }
    },
  },
  computed: {
    currentPathNames() {
      return this.$store.state.currentPathNames.length==0 ?'主页':this.$store.state.currentPathNames[0];
    }
  }
}
</script>

<template>
  <div style="width:1200px;margin:0 auto;">
    <el-container>
      <el-header>
    <div style="display: flex;height:60px;line-height: 60px;border-bottom:1px solid #eee;">
      <div style="width:300px;display: flex;font-size: 20px">
        <div style="width: 60px;">
          <img src="../../assets/logo3.png" alt="" style="width: 60px;height:55px;position:relative;top:3px;right:0"/>
        </div>
        <div style="flex:1;color: #49a796">社区医院挂号平台</div>
      </div>
      <div style="width:200px;flex: 1;text-align: right;padding-right:30px">
        <div v-if="!user.userName">
          <el-button type="text" @click="$router.push('/login')" style="font-size: 15px" round>登录</el-button>
          <el-button type="text" @click="$router.push('/register')" style="font-size: 15px" round>注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="width: 150px; cursor: pointer;">
            <div style="display:inline-block">
              <img :src="user.avatar" alt=""
                   style="width:30px;border-radius: 50%;position:relative;top:14px;right:8px"/>
              <span>{{ user.userName }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width:100px;text-align: center">
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/person">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/password">修改密码</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <span style="text-decoration: none" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
      </el-header>
      <el-container style="margin-top: 20px">
          <el-header style="height:20px;line-height: 20px">
            <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/front/home' }"><i class="el-icon-s-home"></i></el-breadcrumb-item>
              <el-breadcrumb-item>{{currentPathNames}}</el-breadcrumb-item>
            </el-breadcrumb>
            </div>
          </el-header>
        <el-container>
        <el-aside width="150px">
          <el-menu
              style="min-height: 100%;overflow-x: hidden;overflow-y: hidden;box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35)"
              background-color="#ffffff"
              text-color="#000000"
              active-text-color="#659eff"
              router
               >
            <el-menu-item index="/front/scheduler">
              <i class="el-icon-news"></i>
              <span slot="title">预约挂号</span>
            </el-menu-item>
            <el-menu-item index="/front/onlineInquiry">
              <i class="el-icon-reading"></i>
              <span slot="title">在线问诊</span>
            </el-menu-item>
            <el-menu-item index="/front/registrationOrder">
              <i class="el-icon-s-order"></i>
              <span slot="title">挂号订单</span>
            </el-menu-item>
            <el-menu-item index="/front/suspensionNotice">
              <i class="el-icon-view"></i>
              <span slot="title">停诊信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding-top:5px">
    <div>
      <router-view @refreshUser="getUser" style="margin:5px auto"/>
    </div>
        </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-menu-item.is-active {
  background-color: #e6f7ff !important;
}

.el-menu-item:hover {
  background-color: #e6f7ff !important;
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #409EFF !important;
  color: red;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: black;
}
</style>